<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>保险智能分析系统</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="libs/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="libs/bootstrap/bootstrap.min.js"></script>
<style>
	body,h3,p{margin: 0;padding: 0;font-family: '微软雅黑';}
	img{
		border: 0;
	}
	body{
		 background-image: url('image/BG.png'); 
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;		
	}
	.navbar{ 
		background: #ffffff; 
		color: #666666; 
		font-weight: normal;
		border-bottom: 1px solid #e7e7e7;
	}
	.navbar-header{
		float:none;
	}
	.navbar h3{
		font-size: 20px;
		font-weight: bold;
		line-height: 50px;
		letter-spacing: 1px;
		text-align: center;
	}
	.navbar h3 span{
		font-weight: normal;
		padding-left: 10px;
		margin-left: 10px;
		border-left: 1px solid #999999;
	}	
	.navbar a{
		color: #747474;
		font-size: 20px;
		position:absolute;
		top:15px;
		left:10px;
	}
	.navbar a:focus,.navbar a:hover{
		text-decoration: none;
	}		
	.foot{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 70px;
	}
	.foot_con{
		width: 75%;
		margin: 0 auto;
	}
	.flex_div{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}	
	.line_div{
		width: 80px;
		height: 100px;
		background: url('image/line.png') no-repeat center/80px 12px;
	}
	.foot div.Label{
		color: #fba372;
		font-size: 22px;
		width: 92px;
		height: 92px;
		border: 4px solid #fcb38b;
		border-radius: 100px;
		box-sizing: content-box;
	}
	.foot div.Label_active{
		color: #fff;
		background: #f9752b;
	}	
	.foot .Label div{
		width: 92px;
		height: 46px;
		text-align: center;
	}
	.foot .top_p{
	    display: table-cell;
	    text-align: center;
	    vertical-align: bottom;		
	}
	.foot .bottom_p{
		vertical-align: top;
	}
	.end{
		color: #bdbdbd;
		font-size: 16px;
		text-align: center;
		letter-spacing: 2px;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 15px;
	}

	/* 内容 */
	.content{
		overflow-y: auto;
	}
	.nav-tabs{
		border:0;
	}
	.nav-tabs li{
		float: none;
		margin:25px;
		border:0;
		color: #fff;
		font-size: 16px;
	}
	.nav-tabs>li.active{
		color: #f9752b;
	}
	.nav-tabs li a{
		display: inline-block;
		width:100px;
		height:40px;
		background: #7189a9;
		border-radius: 5px;
		text-align: center;
		color: #fff;
	}
	.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
		background: #f9752b;
		color: #fff;
	}
	.page-header{
		border:0;
	}
	.form-group{
		font-size: 16px;
	}
	.form-group .num{
		float: left;
		display: inline-block;
		width:30px;
		height:30px;
		background:#eee;
		text-align: center;
		line-height: 30px;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		color: #666;
		margin-left:5px;
	}
	.form-group .num_input{
		float: left;
		width: 50%;
		border:0;
		background:#eee;
		height:30px;
		display: inline-block;
		margin-left:5px;
		padding-left: 3px;
		color: #f9752b;
	}
	.title{
		margin:10px 0;
		padding-left:10px;
		border-left: 2px solid #f9752b;
		color: #f9752b;
		font-size: 18px;

	}
	.color_orange{
		color: #f9752b;
	}
	.btn_group{
		text-align: center;
		margin:20px 0;
	}
	.btn_group .btn{
		display: inline-block;
		padding:10px 40px;
		background:#7189a9;
		border-radius: 200px;
		color: #fff;
		margin-left:15px;
	}
	.border_box{
		border:1px solid #f9752b;
		padding:15px;
		border-radius: 25px;
	}
	.tit{
		width:120px;
		height:40px;
		background: #f9752b;
		border-radius: 200px;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
		margin:15px 0;
	}
	.tit>span{
		display: block;
		width:36px;
		height:36px;
		border-radius: 50%;
		background:#fff;
		line-height: 36px;
		float: left;
		margin:2px 0 0 2px;
		color: #f9752b;
	}
	.small_font{
		font-size: 10px;
		color: #f9752b;
	}
	.orange_font{
		display: inline-block;
		width:50%;
		color: #f9752b;
		font-size: 20px;
	}
	.tishi{
		padding:15px;
		background: #eee;
		color: #f9752b;
		font-size: 12px;
	}
</style>
</head>
<body>
	<nav class="navbar">
		<div class="container">
			<div class="navbar-header">
				<h3 class="text-center">招商银行<span>智能分析</span></h3>
				<a href="javascript:void(0)" onClick="javascript :history.go(-1);"
					class="glyphicon glyphicon-chevron-left"></a>
			</div>
		</div>
	</nav>
	<div class="content">
		<ul id="myTab" class="nav nav-tabs col-sm-3">
		    <li class="active">
		        <a href="#tabConten1" data-toggle="tab">养老储蓄</a>
		        &gt;
		    </li>
		    <li>
		    	<a href="#tabConten2" data-toggle="tab">子女教育</a>
		        &gt;
		    </li>
		    <li>
		        <a href="#tabConten3" data-toggle="tab">寿险保障</a>
		        &gt;
		    </li>
		    <li>
		        <a href="#tabConten4" data-toggle="tab">重疾保障</a>
		        &gt;
		    </li>
		</ul>
		<div id="myTabContent" class="tab-content col-sm-9">
			<!--养老储蓄-->
		    <div class="tab-pane fade in active" id="tabConten1">
		        <div class="page-header">
				    <h2>盘算一下退休后的幸福生活</h2>
				</div>
				<form role="form">
				  <div class="form-group clearfix">
				    <label class="col-sm-6">目前年龄</label>
				    <p class="col-sm-6">45岁</p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">计划退休年龄</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="6" name="">
						<span class="num add">+</span>
						&nbsp;岁
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">预期寿命</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="85" name="">
						<span class="num add">+</span>
						&nbsp;岁
				    </p>
				  </div>
				  <h3 class="title">退休需要花费多少</h3>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">期望每月无风险的养老金</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="24000" name="">
						<span class="num add">+</span>
						&nbsp;元/月
				    </p>
				  </div>
				   <div class="form-group clearfix">
					    <label class="col-sm-6">总计</label>
					    <p class="col-sm-6">
							<span class="color_orange">24000</span>元/月
					    </p>
				  </div>
				  <h3 class="title">已规划的养老储备</h3>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">社保及企业补充养老保险将提供养老金（月）</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="2000" name="">
						<span class="num add">+</span>
						&nbsp;元/月
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">社保及企业补充养老保险将提供养老金（月）</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="2000" name="">
						<span class="num add">+</span>
						&nbsp;元/月
				    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">总计</label>
					    <p class="col-sm-6">
							<span class="color_orange">4000</span>元/月
					    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">养老储蓄缺口</label>
					    <p class="col-sm-6">
							<span class="color_orange">28000</span>元/月
					    </p>
				  </div>
				  <div class="btn_group">
					<button type="submit" class="btn">保存</button>
				  </div>
				  
				</form>
		    </div>
		    <!--子女教育-->
		    <div class="tab-pane fade" id="tabConten2">
		        <div class="page-header">
				    <h2>计算您对儿女的教育期望</h2>
				</div>
				<form role="form" class="border_box">
					<div class="tit">
						<span>1</span>
						子女一
					</div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">孩子目前年龄</label>
				    <p class="col-sm-6">18岁</p>
				  </div>
				  <h3 class="title">子女教育储蓄额度总需求</h3>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">高中学费生活费预计（每年）</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="9000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">本科学费生活费预计（每年）</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="20000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">硕士/MBA学费生活费预计（每年）</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="40000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">总计</label>
					    <p class="col-sm-6">
							<span class="color_orange">69000</span>元
					    </p>
				  </div>
				  <h3 class="title">已储备的子女教育金</h3>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">已储备额</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="12000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">子女教育缺口</label>
					    <p class="col-sm-6">
							<span class="color_orange">57000</span>元
					    </p>
				  </div>
				  <div class="btn_group">
				  	<button type="button" class="btn">增加子女</button>
					<button type="submit" class="btn">保存</button>
				  </div>
				  
				</form>
		    </div>
		    <div class="tab-pane fade" id="tabConten3">
		    	<!--寿险保障-->
		        <div class="page-header">
				    <h2>计算您的家庭财务安全</h2>
				</div>
				<form role="form">
				  <h3 class="title">家庭财务安全结果基本信息</h3>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">家庭债务：</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="9000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">家庭年收入：</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="20000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">您个人年收入：</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="40000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">赡养父母费用：</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="40000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <h3 class="title">意外/身故保障额度总需求</h3>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">家庭总额度需求<div class="small_font">债务+5年费用+赡养费用</div></label>
				    <p class="col-sm-6">
						<span class="orange_font">244560000</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">您个人身故保障额度需求总计</label>
					    <p class="col-sm-6">
							<span class="orange_font">57000</span>元
					    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">您配偶的身故保障额度需求</label>
					    <p class="col-sm-6">
							<span class="orange_font">57000</span>元
					    </p>
				  </div>
				  <h3 class="title">您已经拥有可以对冲风险的财务安排</h3>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">现金及可随时变现家庭资金：</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="9000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">已购买寿险保险金额：</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="20000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">公司福利保险金额：</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="40000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">总计：</label>
					    <p class="col-sm-6">
							<span class="color_orange">57000</span>元
					    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">身故保障缺口：</label>
					    <p class="col-sm-6">
							<span class="color_orange">57000</span>元
					    </p>
				  </div>
				  <div class="tishi">
					<p>家庭债务：包含车贷房贷等一系列生活贷款</p>
					<p>家庭月支出：包含衣食住行的基础生活，旅行等兴趣暂不在其列</p>
					<p>赡养父母费用：如前面基础问题部分填写了需要赡养父母，则出现该选项</p>
				  </div>
				  <div class="btn_group">
					<button type="submit" class="btn">保存</button>
				  </div>
				  
				</form>
		    </div>
		    <div class="tab-pane fade" id="tabConten4">
		        <!--重疾保障-->
		        <div class="page-header">
				    <h2>不要让重疾影响你的家庭财务安全</h2>
				</div>
				<form role="form">
				  <h3 class="title">重大疾病风险敞口</h3>
				  <h4>1.风险直接引起的花费</h4>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">重疾医疗费用</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="9000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">康复期医疗费用、检查费</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="20000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">康复期营养费、护理费</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="40000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <h3 class="title">意外/身故保障额度总需求</h3>
				  <h4>2.风险发生对职业收入的影响</h4>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">5年收入损失补偿</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="40000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">总计</label>
					    <p class="col-sm-6">
							<span class="color_orange">57000</span>元
					    </p>
				  </div>
				  <h3 class="title">已经拥的财务准备</h3>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">商业重疾保障</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="9000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
				    <label class="col-sm-6">公司福利保险保障</label>
				    <p class="col-sm-6">
						<span class="num minus">-</span>
						<input class="num_input" type="number" min="0" value="20000" name="">
						<span class="num add">+</span>
						&nbsp;元
				    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">总计：</label>
					    <p class="col-sm-6">
							<span class="color_orange">57000</span>元
					    </p>
				  </div>
				  <div class="form-group clearfix">
					    <label class="col-sm-6">重大疾病保障缺口：</label>
					    <p class="col-sm-6">
							<span class="color_orange">57000</span>元
					    </p>
				  </div>
				  <div class="btn_group">
					<button type="button" class="btn" onClick="javascript:window.location.href='financial_result.html';">保存</button>
				  </div>
				  
				</form>
		    </div>
		</div>
	</div>
    <div class="foot">
    	<div class="foot_con">
    		<div class="flex_div">
		     	<div class="Label">
		   			<div class="top_p">基础</div>
		   			<div class="bottom_p">信息</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label">
		   			<div class="top_p">定性</div>
		   			<div class="bottom_p">分析</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label Label_active">
		   			<div class="top_p">定量</div>
		   			<div class="bottom_p">分析</div>
		   		</div>
		   		<div class="line_div"></div>
		    	<div class="Label">
		   			<div class="top_p">诊断</div>
		   			<div class="bottom_p">分析</div>
		   		</div>    			
    		</div>
    	</div>
    </div>
    <p class="end">版权归信诚人寿所有</p>
</body>
<script>
	$(function(){
		//内容居中
		var _height = $(window).height();
		var give_height = _height-260;
		$('.content').css('height',give_height+'px');		
		//加减
		$(".form-group").each(function(index,el){
			$(el).find('.minus').click(function(){
				var a = $(this).siblings('.num_input').val();
				//alert(a)
				if(a>0){
					a--;
				}
				$(this).siblings('.num_input').val(a);
			});
			$(el).find('.add').click(function(){
				var a = $(this).siblings('.num_input').val();
				//alert(a)
				a++;
				$(this).siblings('.num_input').val(a);
			});
		});
	});
</script>
</html>